<template>
  <div class="order-list-container">
    <!-- 面包屑导航 -->
    <div class="break">
      <!-- 面包屑内容 -->
    </div>

    <!-- 订单列表 -->
    <div class="order-list">
      <table>
        <thead>
        <tr>
          <th>订单号</th>
          <th>订单人</th>
          <th>地址</th>
          <th>电话</th>
          <th>卖家</th>
          <th>下单时间</th>
          <th>预计送达时间</th>
          <th>总价</th>
          <th>支付订单号</th>
          <th>支付时间</th>
          <th>支付状态</th>
          <th>订单状态</th>
          <th>详细订单</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="indent in indents" :key="indent.indentid">
          <td>{{ indent.indentid }}</td>
          <td>{{ indent.name }}</td>
          <td>{{ indent.address }}</td>
          <td>{{ indent.phone }}</td>
          <td>{{ indent.mname }}</td>
          <td>{{ formatTime(indent.orderdate) }}</td>
          <td>{{ formatTime(indent.gettime) }}</td>
          <td>{{ indent.totalprice }}</td>
          <td>{{ indent.payid }}</td>
          <td>{{ indent.paytime? formatTime(indent.paytime) : '' }}</td>
          <td>{{ indent.paystatus }}</td>
          <td>{{ indent.signstatus }}</td>
          <td><button @click="viewDetail(indent.indentid)">详情</button></td>
          <td>
            <!-- 根据不同的订单状态显示不同的操作按钮 -->
            <button v-if="indent.signstatus === '已配送'" @click="confirmDelivery(indent.indentid)">收货</button>
            <button v-if="indent.paystatus === '待支付'" @click="pay(indent)">支付</button>
            <!-- 可以在这里添加其他状态对应的按钮 -->
          </td>
        </tr>
        </tbody>
      </table>
    </div>

    <!-- 订单明细模态框 -->
    <div v-if="showModal" class="modal">
      <div class="modal-content">
        <span class="close" @click="closeModal">&times;</span>
        <h2>订单明细</h2>
        <table>
          <tr>
            <th>菜品名称</th>
            <th>价格</th>
            <th>数量</th>
          </tr>
          <tr v-for="detail in modalDetails" :key="detail.id">
            <td>{{ detail.dname }}</td>
            <td>{{ detail.price }}</td>
            <td>{{ detail.count }}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script setup>
import axios from 'axios';
import { ref, onMounted, watch } from 'vue';
import dayjs from 'dayjs';
import { onBeforeUnmount } from 'vue';

const indents = ref([]);
const showModal = ref(false);
const modalDetails = ref([]);
const paymentTimers = ref({});

/**
 * 获取订单数据
 */
async function fetchIndents() {
  try {
    const response = await axios.get('http://localhost:8085/indent/getAll');
    const currentUser = JSON.parse(sessionStorage.getItem('loginUser'));

    // 只有当当前有登录用户时才继续
    if (!currentUser) {
      console.error('当前没有登录用户');
      indents.value = []; // 没有登录用户，不显示任何订单
      return;
    }

    // 过滤出当前登录用户的所有订单
    indents.value = response.data
        .filter(item => item.useid === currentUser.id)
        .map(item => ({
          ...item,
          timer: null // 初始化timer
        }));
    setPaymentTimers();
  } catch (error) {
    console.error('Error fetching indents:', error);
  }
}

/**
 * 查看订单详情
 * @param {string} indentId - 订单 ID
 */
function viewDetail(indentId) {
  axios.get(`http://localhost:8085/indentdetail/listByIndentId/${indentId}`)
      .then(response => {
        console.log('订单明细数据:', response.data);
        modalDetails.value = response.data;
        showModal.value = true;
      })
      .catch(error => {
        console.error('获取订单明细失败:', error);
      });
}

/**
 * 关闭订单明细模态框
 */
function closeModal() {
  showModal.value = false;
  modalDetails.value = [];
}

/**
 * 确认收货操作
 * @param {string} indentId - 订单 ID
 */
function confirmDelivery(indentId) {
  const newStatus = '已收货';
  axios.put(`http://localhost:8085/indent/updatesign`, { indentid: indentId, signstatus: newStatus })
      .then(response => {
        if (response.data.errorCode == 200) {
          const updatedIndents = indents.value.map(indent => {
            if (indent.indentid === indentId) {
              return {...indent, signstatus: '已送达'};
            }
            return indent;
          });
          indents.value = updatedIndents;
        } else {
          console.error('确认收货失败:', response.data.message);
        }
      })
      .catch(error => {
        console.error('确认收货请求失败:', error);
      });
}

/**
 * 支付订单操作
 * @param {Object} row - 订单数据
 */
function pay(row) {
  window.open('http://localhost:8085/alipay/pay?indentid=' + row.indentid);
  console.log(`支付订单: ${row.indentid}`);
}

/**
 * 格式化时间字符串
 * @param {string} timeStr - 时间字符串
 * @returns {string} 格式化后的时间字符串
 */
function formatTime(timeStr) {
  return dayjs(timeStr).format('YYYY-MM-DD HH:mm:ss');
}

/**
 * 清除订单的定时任务
 * @param {Object} indent - 订单数据
 */
function clearPaymentTimer(indent) {
  if (paymentTimers.value[indent.indentid]) {
    clearTimeout(paymentTimers.value[indent.indentid]);
    paymentTimers.value[indent.indentid] = null;
  }
}

/**
 * 设置订单的定时任务
 */
function setPaymentTimers() {
  indents.value.forEach(indent => {
    // 清除已有定时任务
    clearPaymentTimer(indent);

    // 只有当订单支付状态为“待支付”时，才设置定时任务
    if (indent.paystatus === '待支付') {
      cancelPaymentIfTimeout(indent);
    }
  });
}

/**
 * 处理订单未支付超时的情况
 * @param {Object} indent - 订单数据
 */
function cancelPaymentIfTimeout(indent) {
  const orderTime = new Date(indent.orderdate).getTime();
  const currentTime = new Date().getTime();
  const timeoutTime = 5 * 60 * 1000;

  // 计算剩余时间
  const remainingTime = Math.max(0, timeoutTime - (currentTime - orderTime));

  // 设置定时器
  paymentTimers.value[indent.indentid] = setTimeout(() => {
    // 检查订单是否已经被支付或者取消
    if (indent.paystatus === '待支付') {
      updateOrderStatus(indent.indentid, '已取消');
    }
  }, remainingTime);
}

// 确保在组件卸载时清除所有定时器
onBeforeUnmount(() => {
  Object.values(paymentTimers.value).forEach(timer => {
    if (timer) {
      clearTimeout(timer);
    }
  });
});

/**
 * 更新订单支付状态
 * @param {string} indentId - 订单 ID
 * @param {string} status - 要更新的状态
 */
function updateOrderStatus(indentId, status) {
  axios.put(`http://localhost:8085/indent/updatesign`, {
    indentid: indentId,
    paystatus: status
  }).then(response => {
    if (response.data.errorCode === 200) {
      // 成功更新状态
      indents.value = indents.value.map(item => {
        if (item.indentid === indentId) {
          return {...item, paystatus: status};
        }
        return item;
      });
    } else {
      console.error('更新支付状态失败:', response.data.message);
    }
  }).catch(error => {
    console.error('更新支付状态请求失败:', error);
  });
}

onMounted(() => {
  fetchIndents();
  watch(indents, () => {
    setPaymentTimers();
  });
});
</script>

<style scoped>
.order-list-container {
  margin: 30px;
}

.order-list table {
  width: 100%;
  border-collapse: collapse;
}

.order-list th,.order-list td {
  border: 1px solid #ccc;
  padding: 8px;
  text-align: left;
}

.order-list th {
  background-color: #f2f2f2;
}

.modal {
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal-content {
  background-color: #fefefe;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 5px;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.order-list {
  max-height: 450px; /* 您可以根据需要调整这个值 */
  overflow-y: scroll;
  border: 1px solid #ccc; /* 仅为了显示边界 */
}

/* 如果您希望表格的头部固定，可以给<table>添加一个类 */
table.fixed-header {
  width: 100%;
  border-collapse: collapse;
}

/* 确保th和td都有统一的宽度 */
th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}
.order-list table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  table-layout: auto; /* 让列宽根据内容自动调整 */
}

.order-list th,
.order-list td {
  padding: 8px;
  border: 1px solid #ddd;
  white-space: nowrap; /* 禁止内容换行 */
  word-break: keep-all; /* 保持单词完整，不自动换行 */
  overflow: auto; /* 允许内容在单元格内部滚动 */
  min-width: 50px; /* 设置一个最小宽度 */
  /* 可以根据需要设置 max-width */
  text-align: left;
}

/* 可以为特定列设置特定的 min-width 或 max-width，例如 */
.order-list th:first-child,
.order-list td:first-child {
  min-width: 100px;
}

/* 为确保表格在小屏幕设备上也能良好显示，可以使用媒体查询 */
@media screen and (max-width: 768px) {
  .order-list th,
  .order-list td {
    white-space: normal; /* 在小屏幕上允许内容换行 */
  }
}

.order-list th {
  background-color: #f2f2f2; /* 表头背景色 */
  color: #333; /* 表头文字颜色 */
}

.order-list td {
  background-color: #fff; /* 单元格背景色 */
  color: #666; /* 单元格文字颜色 */
}

.order-list tr:nth-child(even) {
  background-color: #f9f9f9; /* 偶数行背景色 */
}

.order-list tr:hover {
  background-color: #eaeaea; /* 鼠标悬停行背景色 */
}

/* 对齐数字列 */
.order-list td:nth-child(7), /* 总价 */
.order-list td:nth-child(8), /* 支付订单号 */
.order-list td:nth-child(9) { /* 支付时间 */
  text-align: right;
}

/* 按钮样式 */
.order-list button {
  padding: 5px 10px;
  margin: 2px;
  border: none;
  border-radius: 3px;
  background-color: #5cb85c;
  color: white;
  cursor: pointer;
  outline: none;
}

.order-list button:hover {
  background-color: #4cae4c;
}
</style>